 <!DOCTYPE html>
<html> 
<head> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>异地车辆环保信息查询</title> 
    <link rel="shortcut icon" href="favicon.ico">
	<#import "/common/import.ftl" as import>
    <@import.tableManagerImportCss/>
    <link href="${WEB_PATH}/resources/css/plugins/treeview/bootstrap-treeview.css" rel="stylesheet">
    <link href="${WEB_PATH}/resources/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="${WEB_PATH}/resources/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <style>
    	.demo:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "条件查询：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.demo {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		}
		.carInfo:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "车主信息：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.carInfo {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		}
		.car:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "车辆信息：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.car {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		    margin-top: 10px;
		} 
		.Jcjg:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "检测结果";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.Jcjg {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		    margin-top: 10px;
		} 
		.tsorg:after {
		    background-color: #F5F5F5;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px 0 4px 0;
		    color: #9DA0A4;
		    content: "检测站信息：";
		    font-size: 12px;
		    font-weight: bold;
		    left: -1px;
		    padding: 3px 7px;
		    position: absolute;
		    top: -1px;
		}
		.tsorg {
		    margin-left: 0px;
		    padding:40px 15px 0px;
		    border: 1px solid #DDDDDD;
		    border-radius: 4px;
		    position: relative;
		    word-wrap: break-word;
		    margin-top: 10px;
		} 
    </style>
    <link href="${WEB_PATH}/resources/js/plugins/fancybox/jquery.fancybox.css" rel="stylesheet">
</head>

<body class="gray-bg"> 
    <div class="wrapper wrapper-content  animated fadeInRight"> 
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5><font id="ssbm_name"></font>异地车辆环保信息查询</h5>
                <div class="ibox-tools">
                </div>
            </div>
            <div class="ibox-content">
                <div class="row row-lg">  
                    <div class="col-sm-12">
                        <!-- Example Events -->
                        <div class="example-wrap"> 
                            <div class="example"> 
                            	<div style="" class="demo ui-sortable">
                            		 <div class="row" style="padding-bottom: 10px;"> 
			                            <div class="col-sm-3">
			                                <div class="form-group">
			                                    <label>车牌号码：</label>
            									<input id="HPHM" name="HPHM" class="form-control"  type="text"  placeholder="请输入车牌号码"> 
			                                </div>
			                            </div>
			                            <div class="col-sm-2" style="padding-top: 22px;">
			                                 <button type="button" class="btn btn-primary" id="search"><i class="fa fa-search"></i>&nbsp;&nbsp;查询</button>
			                            </div> 
			                        </div>
			                    </div>
                                <div class="btn-group hidden-xs" id="exampleTableEventsToolbar" role="group">
                                </div>
                                <table id="exampleTableEvents"  data-mobile-responsive="true" >
                                    <thead>
                                        <tr>
                                            <th data-field="state" data-radio="true"></th>  
                                            <th data-field="ID" data-visible = "false" >id</th>  
								            <th data-field="HPHM" >号牌号码</th> 
								            <th data-field="CPYS" data-formatter="formatCpys">车牌颜色</th> 
								            <th data-field="SYXZ" >使用性质</th>  
								            <th data-field="CLLX" >车辆类型</th>  
								            <th data-field="CJH" >车辆识别代码</th>  
								            <th data-field="CCDJRQ" data-formatter="formatCCDJRQ">初次登记日期</th> 
								            <th data-field="RLZL" >燃料种类</th>
								            <th data-field="JCJSSJ"  data-formatter="formatTime" >检测时间</th>
								            <th data-field="JCSZD" >检测地</th>  
								            <th data-field="ZZPDJG" data-formatter="formatZzpdjg">检测结果</th> 
								            <th data-field="JYJGMC" >检测机构</th>  
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                        <!-- End Example Events -->
                    </div>
                </div>
            </div>
        </div> 
    </div> 
    <@import.tableManagerImportScript/>
    <script src="${WEB_PATH}/resources/js/plugins/jsTree/jstree.min.js"></script>
    <script src="${WEB_PATH }/resources/js/plugins/fancybox/jquery.fancybox.js"></script>
    <script src="${WEB_PATH}/resources/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script >
    	$(function(){
    		$(window).resize(function () {
		        $('#exampleTableEvents').bootstrapTable('resetView');
		    }); 
		    function queryParams(params) {
		        var temp = {  
			        limit: params.limit,  
			        offset: params.offset,  
			        HPHM:$("#HPHM").val(),
			        search:params.search,
			        maxrows: params.limit,
			        pageindex:params.pageNumber,
		        };
		        return temp;
			}
    		//加载table数据
	    	$("#exampleTableEvents").bootstrapTable({
	            url: "",
	            method: 'get',
	            pagination:true,
	            pageNumber:1,  
	            pageSize:10,   
	            detailView:false,
	            iconSize: "outline",
	            toolbar: "#exampleTableEventsToolbar",
	            sidePagination: "server", //设置为服务器端分页
	            queryParams: queryParams,//参数
	            minimumCountColumns: 1, 
	            clickToSelect: true
	        });
	        $("#table_not_result").html('<h1> <i class="iconfont" style="font-size:50px;font-style:normal;" >&#xe6af;</i></h1>请输入车牌号码查询报告信息<div></div>');
	        
        });
         //点击查询搜索
		$("#search").click(function(){
		    if($("#HPHM").val() == ""){
		    	layer.msg('请输入车牌号进行查询', {icon: 5}); 
		    	return false;
		    }
			$("#exampleTableEvents").bootstrapTable('refresh',{url: "${WEB_PATH}/ports/report/getYdclPage.do"});
		});
		
		
		
		function subTableFormatter(index, row, $detail){
			var info = $detail.html('<div id="info"></div>').find('#info');
			info.load("${WEB_PATH}/ports/report/detail.do?id="+row.ID); 
		}
		
		Date.prototype.Format = function(fmt){ //author: meizz   
		  var o = {   
		    "M+" : this.getMonth()+1,                 //月份   
		    "d+" : this.getDate(),                    //日   
		    "h+" : this.getHours(),                   //小时   
		    "m+" : this.getMinutes(),                 //分   
		    "s+" : this.getSeconds(),                 //秒   
		    "q+" : Math.floor((this.getMonth()+3)/3), //季度   
		    "S"  : this.getMilliseconds()             //毫秒   
		  };   
		  if(/(y+)/.test(fmt))   
		    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));   
		  for(var k in o)   
		    if(new RegExp("("+ k +")").test(fmt))   
		  fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
		  return fmt;   
		}
		
		function formatTime(val){
		 	var tt=new Date(val).Format("yyyy-MM-dd hh:mm:ss");
    		return tt; 
		}
		
		function formatCCDJRQ(val){
		 	var tt=new Date(val).Format("yyyy-MM-dd");
    		return tt; 
		}
		
		function formatZzpdjg(val){
			var tt = '';
		 	if(val == "1"){
		 	   tt = '<span class="label label-primary">通过</span>';
		 	}else{
		 	   tt = '<span class="label label-danger">未通过</span>';
		 	}
		 	return  tt;
		} 
		
		function formatCpys(val){
			var tt = '';
		 	if(val == "0"){
		 	   tt = '<span class="label label-primary">蓝牌</span>';
		 	}else if(val == "1"){
		 	   tt = '<span class="label label-danger">黄牌</span>';
		 	}else if(val == "2"){
		 	   tt = '<span class="label label-danger">白牌</span>';
		 	}else if(val == "3"){
		 	   tt = '<span class="label label-danger">黑牌</span>';
		 	}
		 	return  tt;
		} 
		 
    </script>
</body>

</html>